<template>
  <view class="wash-end">
    <view class="top">
      <image class="icon" src="https://files.yzsheng.com/client/imgs/end.png"></image>
      <text>洗车结束</text>
    </view>
    <view class="fault-report" @click="show = true">
      <i-icon icon="iconjubao" size="34rpx" color="#333333"></i-icon>
      <text class="text">故障上报</text>
    </view>
    <view class="time-box">
      <view class="text"><text>用时{{totalTime}}</text></view>
      <view class="text">
        <text>会员剩余</text>
        <!-- <text class="bold">{{card}}</text> -->
				<text class="bold">{{res.surplus}}</text>
        <text>{{cardUnit}}</text>
      </view>
    </view>
    <view class="section">
      <view class="title"><text>您对7迈车洗车还满意吗？</text></view>
      <view class="radio-box">
        <view class="item" v-for="(item, index) in radioList" :key="index" @click="onClickRadio(index)">
          <view class="radio" :class="{active: item.selected}">
            <u-icon name="checkmark" color="#fff" size="26" v-if="item.selected"></u-icon>
          </view>
          <text class="text">{{item.title}}</text>
        </view>
      </view>
      <view class="content">
        <view class="text-area">
          <u-input v-model="value" type="textarea" placeholder="哪些地方不够好，我们尽快完善！" height="90" :auto-height="false" :clearable="false" maxlength="140" />
        </view>
        <view class="num"><text>{{value.length}}/140</text></view>
      </view>
    </view>
    <view class="submit"  @click="onSubmitSatisfaction"><text>提交</text></view>
    
    
    <u-popup mode="bottom" v-model="show" border-radius="30" :zoom="false" :safe-area-inset-bottom="true" :mask-close-able="false" :closeable="false" z-index="999">
      <fault :order-id="orderId" @onClose="onClose" />
    </u-popup>
  </view>
</template>

<script>
import fault from './components/fault.vue'
const dayjs = require('@/utils/dayjs.js')
let stateTimer = null
export default {
  components: {
    fault
  },
  data() {
    return {
      radioList: [{selected: true,title: '满意', id: 1}, {selected: false,title: '一般般', id: 2}, {selected: false,title: '不满意', id: 3}],
      value: '',
      show: false,
      totalTime: '', // 总用时
      card: '', // 会员剩余
      cardUnit: '', // 会员剩余单位
      machineId: '', // 机器id
      orderId: '', // 订单id
			res:{},
			index:0
    }
  },
  onLoad(options) {
    let surplus = options.card ? decodeURIComponent(options.card) : ''
    surplus = surplus.split('-')
    if(surplus.length > 1) {
      this.card = surplus[0]
      this.cardUnit = surplus[1]
    }
    // this.machineId = options.id || ''
		this.$store.commit('setMachineId',options.id)
    this.orderId = options.orderId || ''
    if(options.time) {
      let time = this.$commen.countDown(Number(options.time))
      this.totalTime = `${time[1]}分钟${time[2]}秒`
    }
		// console.log(options)
		this.CheckOrderFinish()
		// this.GetMyActiveCardList(options.cardId)
		// console.log(this.$store.state.machineId)
  },
	onBackPress() {
		uni.redirectTo({
			url: `/pages_commodity/selfWash/selfWash`
		})
		return true
	},
  methods: {
		async CheckOrderFinish(){
			// this.index++
			try{
				const res = await this.$api.selfServiceCarWash.CheckOrderFinish({id:this.orderId})
				// console.log(res.data)
				if(!res.data.coupon_Name){
					/* if(this.index>=10){
						
					} */
					stateTimer = setTimeout(()=>{
						this.CheckOrderFinish()
					},3000)
				}else{
					clearInterval(stateTimer)
					let item = res.data
					item.day = dayjs(item.deadline).diff(dayjs(), 'day') + 1
					const start = Date.parse(new Date())
					if (item.card_Type === 1) {
						const end = Date.parse(item.deadline)
						//当前时间和结束时间
						if (start > end) {
							item.day = 0
						}
						item.formatText = '月卡会员'
						item.surplus = `${item.day||0}`
						item.unit = '天'
					} else if (item.card_Type === 2) {
						item.formatText = '次卡会员'
						item.surplus = `${item.left_Times||0}`
						item.unit = '次'
					} else if (item.card_Type === 3) {
						item.left_Seconds = Math.floor(item.left_Seconds / 60)
						item.formatText = '计时会员'
						item.surplus = `${item.left_Seconds||0}`
						item.unit = '分'
					} else if (item.card_Type === 4) {
						item.formatText = '充值会员'
						item.surplus = `${item.card_Left_Cost||0}`
						item.unit = '元'
					}
					this.res = item
				}
				
				
			}catch(e){
				clearInterval(stateTimer)
			}
		},
		async GetMyActiveCardList(id) {
			try{
				let data = {
					"pageIndex": 1,
					"pageSize": 100
				}
				const res = await this.$api.selfServiceCarWash.GetMyActiveCardList(data)

				console.log(item)
			}catch(e){
				//TODO handle the exception
			}
		},
    onClickRadio(data) {
      this.radioList.map((item, index) => {
        item.selected = data === index
      })
      this.radioList = this.radioList
    },
    onClose() {
      this.show = false
    },
    onSubmitSatisfaction() {
      let self = this
      let evaluate = this.radioList.filter(item => {
        return item.selected
      })
      evaluate = evaluate[0]
      uni.showModal({
        title: '温馨提示',
        content: '是否确定提交？',
        confirmText: '是',
        cancelText: '否',
        confirmColor: '#FBB000',
        success: async (res) => {
          if(res.confirm) {
            try{
              uni.showLoading({
                title: '提交中',
                mask: true
              })
              let result = await this.$api.selfServiceCarWash.AddSatisfaction({
                self_Service_Car_Wash_Order_Id: self.orderId,
                choice_ID: evaluate.id,
                choice_Description: evaluate.title,
                suggestion: self.value
              })
              uni.hideLoading()
              if(result.code === 200) {
                uni.showToast({
                  icon: 'none',
                  title: '感谢您提交的意见，我们将尽快完善',
                  success() {
                    setTimeout(() => {
                      uni.navigateBack({
                        delta: 1
                      })
                    }, 2000)
                  }
                })
              } else {
                uni.showToast({
                  icon: 'none',
                  title: '小7脑子瓦特了，麻烦重新提交呐！'
                })
              }
            }catch(e){
              //TODO handle the exception
              uni.hideLoading()
              uni.showToast({
                icon: 'none',
                title: '小7脑子瓦特了，麻烦重新提交呐！'
              })
            }
          }
        }
      })
    }
  },
	onUnload() {
		clearInterval(stateTimer)
	}
}
</script>

<style lang="scss">
page{
  background-color: #424242;
  height: 100%;
}
.wash-end{
  height: 100%;
  overflow: hidden;
  .top{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120rpx;
    font-size: 46rpx;
    color: #fff;
    font-weight: bold;
    margin-top: 30rpx;
    .icon{
      width: 80rpx;
      height: 80rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .fault-report{
    position: absolute;
    right: 0;
    top: 60rpx;
    width: 170rpx;
    height: 56rpx;
    background-color: #FFE23E;
    border-radius: 28rpx 0 0 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .text{
      font-size: 22rpx;
      color: #333;
      margin-left: 10rpx;
    }
  }
  .time-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: #fff;
      height: 50rpx;
      .bold{
        font-size: 36rpx;
        color: #FFE23E;
        font-weight: bold;
        margin: 0 15rpx;
      }
    }
  }
  .section{
    width: 600rpx;
    height: 650rpx;
    background-color: #FFE23E;
    border-radius: 20rpx;
    margin: 50rpx auto 0;
    padding: 50rpx;
    .title{
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    .radio-box{
      margin-top: 30rpx;
      .item{
        height: 70rpx;
        display: flex;
        align-items: center;
        .radio{
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 40rpx;
          border: 2px solid #666;
          &.active{
            background-color: #666;
            border: none;
          }
        }
        .text{
          margin-left: 20rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
    .content{
      width: 500rpx;
      height: 260rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-top: 20rpx;
      overflow: hidden;
      .text-area{
        margin: 20rpx 20rpx 0;
        overflow: hidden;
        height: 200rpx;
      }
      .num{
        font-size: 22rpx;
        color: #999;
        text-align: right;
        padding: 0 20rpx;
      }
    }
  }
  .submit{
    width: 600rpx;
    height: 88rpx;
    background: linear-gradient(0deg, #FDD421, #FFE23E);
    border-radius: 44rpx;
    margin: 114rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #333;
    &.disabled{
      opacity: .4;
    }
  }
}
</style>
